<script>
import {ref} from "vue";
import avatar from "/src/assets/avatar.jpg"
import like from "/src/assets/like.svg"
import passageDialog from "./passageDialog.vue";
import adoptPassageDialog from "./adoptPassageDialog.vue";
import axios from 'axios';

export default {
  components: {passageDialog, adoptPassageDialog},
  props: {
    userName: { type: String, required: true },
    userAvatar: { type: String, default: '/src/assets/avatar.jpg' },
    messageType: { type: String, required: true },
    showtitle: { type: String, required: true },
    PassageID: { type: Number, required: true },
    token: { type: String, required: true },
    passage: { type: Object, required: true },
    PassageType:{ type: Number, required: true }
  },
  mounted() {
    axios.defaults.headers.common['Authorization'] = `${this.$props.token}`;
    console.log('Received PassageID:', this.PassageID); 
    this.isAdopt = true;
    this.selectedId = this.$props.PassageID;
    
    // Check the read status in sessionStorage on mount
    const readStatus = sessionStorage.getItem(`readStatus-${this.PassageID}-${this.$props.userName}`);
    if (readStatus) {
      this.notread = true;  // Hide badge if passage has been read
    }
  },
  
  data() {
    return {
      avatar,
      like,
      isWarningVisible: ref(false),
      adoptDialogVisible: ref(false),
      dialogVisible: ref(false),
      isAdopt: ref(true),
      isLiked: ref(false),
      notread: ref(false)  // Default to true (unread)
    }
  },
  
  methods: {
    deleteWarning() {
      this.isWarningVisible = true;
    },
    cardClick() {
      this.notread = true;  // Set the badge to hidden on click
      sessionStorage.setItem(`readStatus-${this.PassageID}-${this.$props.userName}`, 'read');  // Mark this passage as read
      
      if (this.PassageType==1) {
        this.adoptDialogVisible = true;
        const PassageID = { PassageID: Number(this.$props.PassageID) };
        sessionStorage.setItem('AdoptPassageID', JSON.stringify(PassageID));
      } else {
        this.dialogVisible = true;
        const PassageID = { PassageID: Number(this.$props.PassageID) };
        sessionStorage.setItem('PassageID', JSON.stringify(PassageID));
      }
    }
  }
}
</script>
<template>
  
    <el-card  style="width: 80%; height: auto; border-radius: 20px; margin-top: 10px; margin-left: 10%;" @click="cardClick">
      <el-badge value="new" :offset="[10, -10]" style="position: absolute; right:12%;" class="item" :hidden="this.notread" />
      <el-row gutter="40">
      <!-- 点赞者头像 -->
      <el-avatar span="6" :src="userAvatar" :size="40" style="margin-left: 10px;" />
      
      <el-col span="18" style="margin-top: 0;">
        <!-- 点赞者信息和被点赞的内容 -->
        <div style="margin-top: 0;">
          <span style="font-size: 18px;">{{ userName }}</span> <br> 赞了你的{{ messageType }}: 
          <span style="color: #808080;">{{ showtitle }}</span>
          <span style="color: #808080;" v-if="showtitle.length === 10"> ...</span>
        </div>
      </el-col>
    </el-row>
  
  </el-card>

  <el-dialog v-model="adoptDialogVisible">
      <adoptPassageDialog  :visible="adoptDialogVisible"  @close = "adoptDialogVisible = false"/>
  </el-dialog>
  <el-dialog v-model="dialogVisible">
      <passageDialog :visible="dialogVisible" @close = "dialogVisible = false"/>
  </el-dialog>

</template>

<style scoped>

.el-avatar{
    cursor: pointer;
}
/*领养贴*/
.rounded-box {
    position:absolute;
    right:1px;
    border: 2px solid #FFD466; /* 边框颜色 */
    border-radius: 5px; /* 圆角弧度 */
    padding: 2px; /* 内边距 */
    width: 20%; /* 宽度 */
    height:18px;
    text-align: center; /* 文字居中 */
    background-color: #FFD466; /* 背景颜色 */
    font-size: 12px; /* 字体大小 */
    font-weight: bold;
    color:white;
    margin-top: 1px;
}
/*deleteBtn动效*/
.deleteBtn {
    background-color: transparent;
    position: relative;
    border: none;
}

.deleteBtn::after {
    position: absolute;
    transform: translateX(-50%);
    width: fit-content;
    height: fit-content;
    background-color: rgb(168, 7, 7);
    padding: 4px 8px;
    border-radius: 5px;
    transition: .2s linear;
    transition-delay: .2s;
    color: white;
    text-transform: uppercase;
    opacity: 0;
    visibility: hidden;
}

.icon {
    transform: scale(1.2);
    transition: .2s linear;
}

.deleteBtn:hover > .icon {
    transform: scale(1.5);
    cursor:pointer;
}

.deleteBtn:hover > .icon path {
    fill: rgb(168, 7, 7);
}

.deleteBtn:hover::after {
    visibility: visible;
    opacity: 1;
    top: -160%;
}


/*like动效*/
/* From Uiverse.io by KSAplay */
.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.container {
    display: block;
    position: relative;
    cursor: pointer;
    font-size: 20px;
    user-select: none;
    transition: 100ms;
}

.checkmark {
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    transition: 100ms;
    animation: dislike_effect 500ms ease;
}

.container input:checked ~ .checkmark path {
    fill: #FFD466;
    stroke-width: 0;
}

.container input:checked ~ .checkmark {
    animation: like_effect 400ms ease;
}

.container:hover {
    transform: scale(1.2);
}
.container:hover .like{
    stroke:#FFD466;
}

@keyframes like_effect {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes dislike_effect {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}
</style>
